<template>



<div class="login-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
  <el-form :rules="rules" :model="loginData" class="form-input">
    <el-form-item label="账号" prop="username" class="login-input-text">
      <el-input  v-model="loginData.username">
        <template #suffix>
          <el-icon class="el-input__icon"><user /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" class="login-input-text">
      <el-input type="password" v-model="loginData.password">
      </el-input>
    </el-form-item>
  </el-form>
  <div class="login-btn">
    <el-button type="primary" @click="login">登录</el-button>
  </div>
</div>
</template>

<script>
import qs from 'qs'
import storeUtil from '../utils/localstorage'
import { User } from '@element-plus/icons-vue'
export default {
  components:{
    user:User
  },
  name: "Login",
  data(){
    return{
      loginData:{},
      rules:{
        username:{
          required: true,
          message:'请输入账号',
          trigger:'blur'
        },
        password:{
          required: true,
          message:'请输入密码',
          trigger:'blur'
        }
      }
    }
  },
  methods:{
    login(){
      if(!this.loginData.username || !this.loginData.password){
        // alert("");
        //已经全局加载了element-plus
        this.$message({message:"请输入账号和密码"})
        return;
      }
      let data = qs.stringify(this.loginData)
      this.$axios.post('/api/user/login',data)
      .then(data=>{
        if(data.code === 0) {
          let uid = data.user.id;
          let token = data.user.token;
          storeUtil.save('uid', uid);
          storeUtil.save('token', token);
          // this.$router.push({name:'index',params:{key:'value'}})
          // // this.$router.push("/?key=value");
          this.$router.push({path:'/'})
        }
          //在前端保存以上两个值，用
      }).catch(error=>{
        console.log(error);
      })
    }
  }
}
</script>

<style scoped>
.login-container{
  position: relative;
  top: 100px;
  margin: 0 auto;
  width: 400px;
  height: 220px;
  border: gray solid 1px;
  border-radius: 5px;
}

.form-input{
  margin-top:20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-input-text {
  width: 300px;

}
.login-btn{
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}
</style>
